import ReactDOM from 'react-dom'
import '../index.css'
import React from 'react'
import Tabs from './Tabs'
import Form from './Form'
import List from './List'
import { useState } from 'react'
console.log(useState)

// 导入本地静态资源图片
import Avator from '../images/02.png'
// 类形式创建组件
class Element extends React.Component {
  // 定义状态
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot'
      },
      {
        id: 2,
        name: '时间',
        type: 'time'
      }
    ],
    active: 'hot',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: '2021-10-10 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '听妈妈的话',
        time: '2021-10-11 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0
      },
      {
        id: 3,
        author: '陈奕迅',
        comment: '十年',
        time: '2021-10-11 10:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1
      }
    ]
  }
  // 发表评论
  publish = (comment) => {
    // console.log(comment)
    // 添加到list里面
    const newList = [
      {
        id: Date.now(),
        author: 'zs',
        comment,
        // comment: this.state.content,
        time: new Date().toString(),
        img: Avator,
        attitude: 0
      },
      ...this.state.list
    ]
    this.setState({
      list: newList
    })
  }
  // 渲染的内容
  render() {
    const { list, active, tabs } = this.state
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>{list.length} 评论</span>
          </div>
          {/* 排序 */}
          <Tabs
            tabs={tabs}
            active={active}
            hUpdateActive={this.hUpdateActive}></Tabs>
          {/* 添加评论 */}
          <Form publish={this.publish}></Form>
          {/* 评论列表 */}
          <List list={list} chageATT={this.chageATT} del={this.hDel}></List>
        </div>
      </div>
    )
  }
  // 点击高亮显示
  hUpdateActive = (type) => {
    // 拿到点击之后的type值
    console.log(type)
    this.setState({
      active: type
    })
  }

  // 改变态度
  chageATT = (id, attitude) => {
    // alert(id, attitude)
    const newList = this.state.list.map((it) => {
      // 如果点击的那个id和循环的id是同一个 就改变其中的属性attitude
      // 否则就直接返回
      return it.id === id ? { ...it, attitude } : { ...it }
      //   if (it.id === id) {
      //     return { ...it, attitude }
      //   } else {
      //     return { ...it }
      //   }
    })
    this.setState({
      list: newList
    })
  }
  // 删除数组元素
  hDel = (id) => {
    // 当前点击的id和循环的id不一样就去掉
    const newList = this.state.list.filter((it) => it.id !== id)
    this.setState({
      list: newList
    })
  }
}
ReactDOM.render(<Element />, document.getElementById('root'))
